import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import React from "react";
import { AtIcon } from "taro-ui";

const HomeCard: React.FC<{ props: HomeCardProps }> = ({ props }) => {

  const handleMore = () => {
    Taro.navigateTo({
      url: `/pages/home-more/index?title=${props.title}&id=${props.categoryId}`,
    })
  }

  const handleToService = (serviceId: number, serviceName: string) => {
    Taro.navigateTo({
      url: `/pages/service-list/index?serviceId=${serviceId}&serviceName=${serviceName}`
    })
  }

  return (
    <View className='w-[95%] py-1 rounded-md bg-white'>

      <View className='flex justify-between px-2'>
        <View className='font-semibold text-base'>
          {props.title}
        </View>
        <View className='flex items-center'>
          <View className='text-xs  text-gray-400' onClick={handleMore}>更多</View>
          <AtIcon value='chevron-right' size='14' color='#ccc' />
        </View>
      </View>

      <View className='flex justify-between px-2'>
        {
          props.product.map((item) => (
            <>
              <View className='flex flex-col' onTap={() => handleToService(item.serviceId, item.title)}>
                <Image src={item.pic} className='w-[200px] h-[200px] bg-contain rounded-md flex-shrink-0' />
                <View className='text-sm'>{item.title}</View>
                <View className='text-red-500'>
                  {item.price}
                  <Text className='text-xs'>元/小时起</Text>
                </View>
              </View >
            </>
          ))
        }
      </View>

    </View >
  )
}

export default HomeCard;
